<template>
	<view class="sti_form_page" v-if="showPage">
		<view class="sti_form_box">
			<view class="sti_input_box">
				{{info.name}}
				<!-- <input class="flex-1" v-model="info.name" placeholder="请填写定车姓名" placeholder-style="color:#000000;" /> -->
			</view>
			<view class="mt-20 sti_input_box">
				{{info.mobile}}
			</view>
			<view class="mt-20 sti_upload_box">
				<view class="display_flex">
					<view class="f-13">上传购车合同</view>
					<view class="f-10 c-999999 ml-10">支持jpg/png，大小不超过20M</view>
				</view>
				<view v-if="contractError" class="input_tips">请上传购车合同</view>
				<view class="upload_border_box" @click="uploadImg(1)">
					<uni-icons type="plus-filled" color="#C80F48" size="18"></uni-icons>
					<view class="f-10">点击上传购车合同照片</view>
				</view>
				<view class="mt-20">
					<uni-row :gutter="20">
						<uni-col v-for="(item,index) in info.contract" :key="index" :span="6">
							<view class="upload_img_box">
								<view class="upload_img_mask">
									<uni-icons @click="delpic(1,index)" type="minus-filled" color="#C80F48"
										size="18"></uni-icons>
								</view>
								<image class="upload_img" :src="picUrl+item" mode="aspectFill"></image>
							</view>
						</uni-col>
					</uni-row>
				</view>
			</view>
			<view class="mt-20 sti_upload_box">
				<view class="display_flex">
					<view class="f-13">上传购车发票</view>
					<view class="f-10 c-999999 ml-10">支持jpg/png，大小不超过20M</view>
				</view>
				<view v-if="invoiceError" class="input_tips">请上传购车发票</view>
				<view class="upload_border_box" @click="uploadImg(2)">
					<uni-icons type="plus-filled" color="#C80F48" size="18"></uni-icons>
					<view class="f-10">点击上传购车发票</view>
				</view>
				<view class="mt-20">
					<uni-row :gutter="20">
						<uni-col v-for="(item,index) in info.invoice" :key="index" :span="12">
							<view class="upload_img_box">
								<view class="upload_img_mask">
									<uni-icons @click="delpic(2,index)" type="minus-filled" color="#C80F48"
										size="18"></uni-icons>
								</view>
								<image class="upload_img" :src="picUrl+item" mode="aspectFill"></image>
							</view>
						</uni-col>

					</uni-row>
				</view>
			</view>
			<view class="mt-15 f-12">
				<rich-text :nodes="info.form_tips"></rich-text>
			</view>
			<view @click="changeCheckbox" class="agremment_box" style="margin-bottom: 0;margin-top: 20rpx;">
				<image v-if="isAgree" class="login_checkbox" :src="onlinePic+'checkbox_on.png'">
				</image>
				<image v-else class="login_checkbox" :src="onlinePic+'checkbox.png'">
				</image>
				<span class="agremment_text">我已阅读并同意</span>
				<span @click="goAgreement(info.agreement_id)" class="agremment_text"
					style="color: #33a1ff;">《{{info.agreement_name}}》</span>
			</view>
			<view class="mt-20 submit_btn_block" @click="submitForm">提交信息</view>
		</view>
		<view class=""></view>
		<image v-if="info.bottom_img" class="sti_form_bottom_img" :src="picUrl+info.bottom_img" mode="widthFix"></image>
	</view>
</template>

<script>
	import {
		getQ1ActiveInfo,
		submitQ1ActiveContractForm,
		noticeTemplate
	} from '@/api/motortime.js';
	let app = getApp()
	export default {
		data() {
			return {
				showPage: false,
				info: '',
				isSubmit: true,
				contractError: false,
				invoiceError: false,
				isAgree: false,
				isUpdate: false,
				picUrl: app.globalData.picUrl,
				onlinePic: app.globalData.onlinePic,
				pdbottom: uni.getSystemInfoSync().safeAreaInsets.bottom + 80,
			};
		},
		onShow() {
			if (!uni.getStorageSync('access_token')) {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			}
			if (uni.getStorageSync('onload')) {
				uni.showLoading({})
				this.getQ1ActiveInfo()
				uni.removeStorage({
					key: 'onload'
				})
			}
		},
		onLoad(options) {
			this.isUpdate = options.isUpdate ? options.isUpdate : false
			if (uni.getStorageSync('access_token')) {
				uni.showLoading({})
				this.getQ1ActiveInfo()
			}
			var params = {
				event_code: 'gxr宠粉活动',
				path: 'pages/gxr/form',
				event_id: '',
				title: '',
				source_page: 'gxr宠粉活动-表单',
				value: '',
			}
			app.BurialPoint(params)
		},
		methods: {
			getQ1ActiveInfo() {
				getQ1ActiveInfo({}).then(res => {
					if (res.state == 1) {
						this.info = res.data.info
						uni.setNavigationBarTitle({
							title:res.data.info.huodong_title?res.data.info.huodong_title:'斯巴鲁官方车友会'
						})
						if (res.data.info.is_enroll == 1) {
							if (res.data.info.status == 1) {
								if (this.isUpdate) {
									this.showPage = true
								} else {
									if (res.data.info.contract_status == 0) {
										this.showPage = true
									} else {
										uni.redirectTo({
											url: '/pages/gxr/result'
										})
									}
								}
							} else {
								uni.redirectTo({
									url: '/pages/gxr/result'
								})
							}

						} else {
							uni.redirectTo({
								url: '/pages/gxr/form'
							})
						}
						uni.hideLoading()
						//is_enroll:,   是否提交  0 未提交  1 已提交
					} else {
						uni.showToast({
							title: res.error[0],
							mask: true,
							icon: 'none',
							duration: 1500
						})
					}
				})
			},
			uploadImg(type) {
				var that = this
				uni.chooseMedia({
					count: 9,
					mediaType: ['image'],
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						var tempFilePaths = res.tempFiles
						uni.showLoading({
							title: '正在上传'
						})
						that.uploadImage(tempFilePaths, 0, type)
					}
				});
				var params = {
					event_code: 'gxr宠粉活动',
					path: 'pages/gxr/form',
					event_id: that.huodong_id,
					title: '',
					source_page: '宠粉活动-上传照片',
					value: '',
				}
				app.BurialPoint(params)
			},
			uploadImage(files, i, type) {
				var i
				uni.uploadFile({
					url: app.globalData.uploadUrl,
					filePath: files[i].tempFilePath,
					name: 'img',
					success: (res) => {
						var picdata = JSON.parse(res.data);
						if (type == 1) {
							this.info.contract.push(picdata.data.img)
							this.contractError = false
						} else if (type == 2) {
							this.info.invoice.push(picdata.data.img)
							this.invoiceError = false
						}
						i++
						if (i < files.length) {
							this.uploadImage(files, i, type)
						} else {
							uni.hideLoading()
						}
					}
				});
			},
			delpic(type, index) {
				var that = this
				uni.showModal({
					content: '确定要删除这张图片吗？',
					confirmText: '删除',
					cancelText: "取消",
					success: function(res) {
						if (res.confirm) {
							var params = {
								event_code: 'gxr宠粉活动',
								path: 'pages/gxr/form',
								event_id: '',
								title: '',
								source_page: '宠粉活动-删除图片',
								value: '',
							}
							app.BurialPoint(params)
							if (type == 1) {
								that.info.contract.splice(index, 1);
							} else {
								that.info.invoice.splice(index, 1);
							}

						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			changeCheckbox() {
				this.isAgree = this.isAgree ? false : true
			},
			goAgreement(id) {
				uni.navigateTo({
					url: '/pages/agreement/agreement?scene=' + id + '&club_id=' + this.info.club_id
				})
				var params = {
					event_code: 'gxr宠粉活动',
					path: 'pages/gxr/form',
					event_id: '',
					title: '',
					source_page: '宠粉活动-阅读并同意协议',
					value: '',
				}
				app.BurialPoint(params)
			},
			submitForm() {
				if (this.isSubmit) {
					var params = {
						event_code: 'gxr宠粉活动',
						path: 'pages/gxr/form',
						event_id: '',
						title: '',
						source_page: '宠粉活动-提交信息',
						value: '',
					}
					app.BurialPoint(params)
					this.isSubmit = false

					if (this.info.contract.length == 0) {
						uni.showToast({
							title: '请上传购车合同',
							mask: true,
							icon: 'none',
							duration: 1500
						})
						this.contractError = true
						this.isSubmit = true
						uni.pageScrollTo({
							scrollTop: 50
						})
						return false;
					}
					if (this.info.invoice.length == 0) {
						uni.showToast({
							title: '请上传购车发票',
							mask: true,
							icon: 'none',
							duration: 1500
						})
						this.invoiceError = true
						this.isSubmit = true
						return false;
					}
					if (!this.isAgree) {
						uni.showToast({
							title: '请阅读并同意《个人隐私保护声明》',
							mask: true,
							icon: 'none',
							duration: 1500
						})
						this.isSubmit = true
						return false;
					}
					var that = this
					// #ifdef MP-WEIXIN
					uni.requestSubscribeMessage({
						tmplIds: ['RmPFHUx1IW1qdYz5iDyPVrsIoB0-jNG_UH4eajDcjGE'],
						success: function(res) {
							noticeTemplate({
								template_type: 5 //4:车友会；5:活动报名结果；6:活动创建结果
							}).then(res => {
								if (res.state == 1) {
									that.submitStiForm()
								} else {
									that.isSubmit = true
									uni.showToast({
										title: res.error[0],
										mask: true,
										icon: 'none',
										duration: 1500
									})
								}
							})
						},
						fail: function(e) {
							console.log(e)
							that.isSubmit = true
						}
					})
					// #endif
					// #ifndef MP-WEIXIN
					that.submitStiForm()
					// #endif
				}
			},
			submitStiForm() {
				uni.showLoading({})
				submitQ1ActiveContractForm({
					huodong_join_id: this.info.huodong_join_id,
					contract: this.info.contract,
					invoice: this.info.invoice,
					register_channel: uni.getStorageSync('register_channel') ? uni
						.getStorageSync('register_channel') : '',
				}).then(res => {
					if (res.state == 1) {
						uni.hideLoading()
						uni.showToast({
							title: '提交成功',
							mask: true,
							icon: 'success',
							duration: 1500
						})
						uni.redirectTo({
							url: "/pages/gxr/result"
						})
						var params = {
							event_code: 'gxr宠粉活动',
							path: 'pages/gxr/form',
							event_id: '',
							title: '',
							source_page: '宠粉活动-提交信息提交成功',
							value: '',
						}
						app.BurialPoint(params)
						this.isSubmit = true
					} else {
						uni.hideLoading()
						this.isSubmit = true
						uni.showToast({
							title: res.error[0],
							mask: true,
							icon: 'none',
							duration: 1500
						})
					}
				})
			}
		},
		onShareAppMessage(res) {
			app.getShareTask()
			return {
				title: this.info.share_title,
				imageUrl: this.info.share_img ? this.picUrl + this.info.share_img : this.picUrl + this.info.index_img
			}
		},
	}
</script>

<style lang="scss">
	page {
		background-color: #EEEEEE;
	}

	.sti_form_page {
		position: relative;
		min-height: 100vh;

		.sti_form_box {
			padding: 47rpx;

			.step_select {
				.uni-select {
					font-size: 26rpx !important;
					padding-left: 30rpx !important;
					padding-right: 30rpx !important;
					height: 88rpx !important;
					background-color: #ffffff;
					border: 2rpx solid #E9E9E9;
				}

				.uni-select__input-placeholder {
					color: #000000 !important;
					font-size: 26rpx !important;
				}
			}

			.sti_input_box {
				flex: 1;
				display: flex;
				align-items: center;
				height: 88rpx;
				font-size: 26rpx;
				padding: 0 30rpx;
				border-radius: 8rpx;
				background-color: #ffffff;
				border: 1rpx solid #E9E9E9;
			}

			.code_btn {
				height: 88rpx;
				width: 170rpx;
				color: #ffffff;
				font-size: 22rpx;
				margin-left: 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 8rpx;
				background-color: #C80F48;
			}

			.code_btn_ok {
				height: 88rpx;
				width: 170rpx;
				color: #ffffff;
				font-size: 22rpx;
				margin-left: 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 8rpx;
				background-color: #23AB5E;
			}

			.code_btn_send {
				height: 88rpx;
				width: 170rpx;
				color: #ffffff;
				font-size: 22rpx;
				margin-left: 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 8rpx;
				background-color: #E5BAC8;
			}

			.input_tips {
				color: #C80F48;
				font-size: 22rpx;
				margin-top: 11rpx;
			}

			.input_tips_green {
				color: #23AB5E;
				font-size: 22rpx;
				margin-top: 11rpx;
			}

			.sti_upload_box {
				font-size: 26rpx;
				padding: 40rpx 30rpx;
				border-radius: 8rpx;
				background-color: #ffffff;

				.upload_border_box {
					margin-top: 40rpx;
					padding: 25rpx 0;
					text-align: center;
					border: 1rpx solid #EEEEEE;
				}

				.upload_img_box {
					width: 100%;
					height: 168rpx;
					margin-bottom: 20rpx;
					position: relative;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 8rpx;
					background-color: #F2F2F2;
				}

				.upload_img {
					width: 100%;
					height: 168rpx;
					border-radius: 8rpx;
					vertical-align: middle;
				}

				.card_img_box {
					width: 285rpx;
					height: 200rpx;
					margin-bottom: 20rpx;
					position: relative;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 8rpx;
				}

				.card_img {
					position: absolute;
					z-index: 2;
					width: 285rpx;
					height: 200rpx;
					border-radius: 8rpx;
					vertical-align: middle;
				}

				.card_text {
					position: absolute;
					z-index: 2;
					text-align: center;
				}

				.upload_img_mask {
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					z-index: 2;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 8rpx;
					background-color: rgba(0, 0, 0, .6);
				}

				.upload_again {
					color: #ffffff;
					font-size: 22rpx;
					text-decoration: underline;
				}
			}

			.agremment_box {
				margin-bottom: 180rpx;

				.login_checkbox {
					width: 26rpx;
					height: 26rpx;
					vertical-align: middle;
				}

				.agremment_text {
					color: #191919;
					font-size: 24rpx;
					margin-left: 10rpx;
					vertical-align: middle;
				}
			}

			.submit_btn_block {
				font-size: 36rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100%;
				height: 110rpx;
				color: #ffffff;
				margin-bottom: 278rpx;
				border-radius: 8rpx;
				background-color: #C80F48;
			}
		}

		.sti_form_bottom_img {
			width: 100%;
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			z-index: -1;
		}

	}
</style>